// TODO 使用Vue完成科泰淘购物车功能


new Vue({
    el: "#app",
    data: {
        cartList: [
            {
                id: 1,
                goodsName: '男士休闲裤夏季新款',
                count: 1,
                price: 99.0,
                color: '灰色',
                size: 'L',
                imgUrl: 'images/goods-1.png',
                checked: false,
            },
            {
                id: 2,
                goodsName: '男士夏季装短袖polo衫',
                count: 1,
                price: 199.0,
                color: '浅蓝',
                size: 'M',
                imgUrl: 'images/goods-2.png',
                checked: false,
            },
        ],
        selectAll: false
    },
    filters: {
        formatPrice(source) {
            return source.toLocaleString('zh', { style: 'currency', currency: 'CNY', useGrouping: true, minimumFractionDigits: 2 });
        }
    },
    methods: {
        delSelect() {
            this.cartList = this.cartList.filter(item => !item.checked);
        },
        delAll() {
            this.cartList = [];
        },
        addCount(item) {
            item.count = item.count + 1;
        },
        subCount(item) {
            if (item.count > 1) {
                item.count = item.count - 1;
            }

        },
        selectAllFn() {
            let selectAll = this.selectAll;
            this.cartList.forEach(element => {
                element.checked = !selectAll;
            });
        }
    },
    computed: {
        productAmount() {
            let totalMoney = 0;
            this.cartList.filter(item => item.checked).forEach(element => {
                totalMoney += parseInt(element.count) * parseFloat(element.price)
            });
            return totalMoney;
        },
        selectCount() {
            let selectCount = 0;
            this.cartList.filter(item => item.checked).forEach(element => {
                selectCount += parseInt(element.count)
            });
            return selectCount;
        }
    },
});

